import React, { Component } from 'react';
import 'styles/advertisement-page/ad-a-map.scss';

import { isSupportScroll, scrollToMyDestination } from 'share/common';

import CloseImg from 'images/ad-img/hua-bei/close.png';
import headerImg from 'images/ad-img/a-map/header.jpg';
import iconImg from 'images/ad-img/a-map/icon.png';
import page1Img from 'images/ad-img/a-map/page1.jpg';
import page2Img from 'images/ad-img/a-map/page2.jpg';
import page3Img from 'images/ad-img/a-map/page3.jpg';
import page4Img from 'images/ad-img/a-map/page4.jpg';
import page5Img from 'images/ad-img/a-map/page5.jpg';
import saveMoneyImg from 'images/ad-img/a-map/savemoney.png';
import saveTimeImg from 'images/ad-img/a-map/savetime.png';
import twoCardImg from 'images/ad-img/a-map/two-cars.png';
import debounce from 'lodash.debounce';
import menuRoute from 'routes/menuRoute';

class AdAMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      questionList: [
        {
          Q: 'Q1：使用流程是什么样的',
          line1: '启用高德企业打车后，员工通过汇联易进入高德打车，用车后个人支付用车费用，费用会自动推送回汇联易员工',
          line2: '账本，员工提交报销后，财务可统一申请开大发票',

        },
        {
          Q: 'Q2：发票类型是什么样的',
          line1: '高德为您的企业提供6个点的增值税专用发票，发票类型为：“经纪代理服务*代订车服务”'
        },
        {
          Q: 'Q3：为什么员工会反馈没有收到费用',
          line1: '请确保员工汇联易手机号与登录高德手机号一致，若不一致，请联系汇联易服务人员'
        }
      ],
      activeSection: 'GUIDE',
      showBar: false
    };
    this.scrolling = false;
    this.scrollingFalse = debounce(this.scrollingFalse, 1100);
    this.goToApplyReal = debounce(this.goToApplyReal, 800);
  }

  componentDidMount() {
  }

  onScrollPage = (e) => {
    if (!this.scrolling) {
      if (this.AMapPage.scrollTop > (this.sectionOneRef.offsetTop - 82)) {
        this.setState({showBar: true})
      } else {
        this.setState({showBar: false})
      }
      if (this.AMapPage.scrollTop > (this.sectionTwoRef.offsetTop - 72)) {
        this.setState({activeSection: 'Q&A'})
      } else {
        this.setState({activeSection: 'GUIDE'})
      }
    }
  }

  handleMenuClick = (isFirstMenu) => {
      this.scrolling = true;
      this.scrollingFalse();
      if (isFirstMenu) {
        scrollToMyDestination(this.AMapPage, this.sectionOneRef.offsetTop - 72);
        this.setState({activeSection: 'GUIDE'})
      } else {
        scrollToMyDestination(this.AMapPage, this.sectionTwoRef.offsetTop - 72);
        this.setState({activeSection: 'Q&A'})
      }
  }

  scrollingFalse = () => {
    this.scrolling = false;
  }

  onWheelHandle = () => {
    this.scrolling = false;
  }

  goToApply = () => {
    this.props.onCancel();
    this.goToApplyReal();
  }

  goToApplyReal = () => {
    this.context.router.push(menuRoute.getPageUrlByKey("consumer-open-page").replace(':type', 'GaodeEnterpriseCar'))
  }

  render() {
    const { questionList, showBar, activeSection } = this.state;
    const isSupport = isSupportScroll(this.AMapPage);
    let isWin = window.navigator.platform === 'Win32'; //判断是否是windows
    return (
      <div className='ad-a-map-container' ref={ref => this.AMapPage = ref} onScroll={this.onScrollPage} onWheel={this.onWheelHandle}>
        <div className="ad-a-map-header">
          <div className="ad-a-map-exit-button" onClick={()=>{this.props.onCancel()}}>
            <img onMouseDown={e=>e.preventDefault()} className='exit-img' src={CloseImg} alt="关闭"/>
          </div>
          <div className={`${showBar ? 'bar' : 'bar bar-hide'} ${isWin ? 'bar-margin' : ''}`}>
            <div className="menu">
              <div
                onClick={()=>isSupport && this.handleMenuClick(true)}
                className={activeSection === 'GUIDE' ? 'single-menu active' : 'single-menu'}
                style={{cursor: isSupport ? 'pointer' : 'default'}}
              >
                高德介绍
              </div>
              <div
                onClick={()=>isSupport && this.handleMenuClick(false)}
                className={activeSection === 'Q&A' ? 'single-menu active' : 'single-menu'}
                style={{cursor: isSupport ? 'pointer' : 'default'}}
              >
                常见问题
              </div>
            </div>
            <div className="method">
              <span className="describe">汇联易客户经理：<a className="tel-a" href="tel:400-829-7878">400-829-7878</a></span>
              <span className='bar-apply-btn' onClick={this.goToApply}>立即应用</span>
            </div>
          </div>
          <div className="center-container">
            <div className="icon-box-img">
              <img onMouseDown={e=>e.preventDefault()} src={iconImg} className='icon-img' alt=""/>
            </div>
            <div className="main-title">
              中国最大的移动出行平台
            </div>
            <div className="sub-text">
              高德企业用车新功能邀您体验
            </div>
            <div className="apply-btn" onClick={this.goToApply}>立即应用</div>
            <div className="contact-text">
              汇联易客户经理：<span><a className='phone-a' href="tel:4008297878">400-829-7878</a></span>
            </div>
            <img onMouseDown={e=>e.preventDefault()} src={twoCardImg} className='cars-img'/>
          </div>
          <img onMouseDown={e=>e.preventDefault()} src={headerImg} className='header-back-img'/>
        </div>
        <div className="white-content padding-80" ref={ref => this.sectionOneRef = ref}>
          <div className="standard-width">
            <img onMouseDown={e=>e.preventDefault()} src={page1Img} className='page-img'/>
          </div>
        </div>
        <div className="black-content">
          <div className="standard-width">
            <img onMouseDown={e=>e.preventDefault()} src={page2Img} className='page-img'/>
          </div>
        </div>
        <div className="white-content">
          <div className="standard-width">
            <div className='page3-box'>
              <div className="absolute-text">
                集结全网全部合规运力，为企业提供出行服务
              </div>
              <img onMouseDown={e=>e.preventDefault()} src={page3Img} className='page-img'/>
            </div>
          </div>
        </div>
        <div className="gray-content">
          <div className="standard-width">
            <div className="page4-box">
              <div className="absolute-content">
                <div className="page4-title">
                  用车安全保障 一路无忧
                </div>
                <div className="tip-title">
                  01.员工人身财产安全
                </div>
                <div className="tip-text">
                  <span style={{color: '#218DFF'}}>"安全助手"、"紧急求助"和各类安全提醒，</span>
                  <span>保证企业用户的生命财产安全；<br/>
                    高德智能客服系统，时刻关注用户投诉，密切追踪投诉进展；<br/>
                    为员工提供保险赔付、先行垫付、伤者关怀等保障，省心无忧。</span>
                </div>
                <div className="tip-title">
                  02.企业利益及安全
                </div>
                <div className="tip-text">
                  <span style={{color: '#218DFF'}}>行程轨道监测：</span>
                  <span>基于行程轨迹关联高德的道路信息数据进行轨迹真实性以<br/>
                    及行程异常判断，可有效识别未乘车扣费、司机绕路等司机风险行为。</span>
                </div>
              </div>
              <img onMouseDown={e=>e.preventDefault()} src={page4Img} className='page-img'/>
            </div>
          </div>
        </div>
        <div className="img-content" style={{backgroundImage: `url('${page5Img}')`}}>
          <div className="standard-width">
            <div className="page5-title">
              企业服务能力 - 企业客服专线 VIP服务
            </div>
            <div className="page5-flex-box">
              <div className="single">
                <div className="single-title">
                  专线服务企业用户
                </div>
                <div className="single-text">
                  · 企业用户尊享VIP客服服务，所有进线反馈均由高德客服一站式优先解决，保障员工用车体验
                </div>
                <div className="single-text">
                  · 对未乘车扣费，费用不合、绕路、多收高速、路桥费等费用问题，高德客服优先处理，进行赔付或修改价格等操作，最大程度上保障企业利益
                </div>
              </div>
              <div className="single">
                <div className="single-title">
                  钉钉群专项处理
                </div>
                <div className="single-text">
                  · 对出现司机出现服务态度差、未到达目的地、车内抽烟、不佩戴口罩等一系列投诉进行优先处理，已经支付的订单进行全额退款、未支付的订单无需支付</div>
                <div className="single-text">
                · 建立企业钉钉投诉反馈专项群，第一时间响应并解决用户投诉问题、用户反馈专线客服跟进
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="blue-content">
          <div className="standard-width">
            <div className="page6-title">
              接入高德打车企业版 - 用车成本降低、财务人力投入降低
            </div>
            <div className="page6-flex-box">
              <div className="single">
                <img onMouseDown={e=>e.preventDefault()} src={saveMoneyImg} className='page6-icon'/>
                <div className="promo">
                  <span>
                    企业用车成本至少<span style={{fontSize: '36px', fontWeight: '500'}}>节省6%</span><br/>
                    高德可为企业开具抵税专票，抵扣企业进项
                  </span>
                </div>
              </div>
              <div className="single">
                <img onMouseDown={e=>e.preventDefault()} src={saveTimeImg} className='page6-icon'/>
                <div className="promo">
                  <span>
                    财务<span style={{fontSize: '36px', fontWeight: '500'}}>免去</span>收票、审核人力<br/>
                    高德可每月为所有合规行程开具一张发票
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="ad-a-map-QAndA"  ref={ref => this.sectionTwoRef = ref}>
          <div className="content">
            <div className="main-title">
              {'常见问题'}
            </div>
            {questionList.map(item =>
              <div className="single-question">
                <div className="question-title">
                  {item.Q}
                </div>
                <div className="question-answer">
                  {item.line1}
                </div>
                {item.line2 && <div className="question-answer">
                  {item.line2}
                </div>}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

AdAMap.propTypes = {};

AdAMap.contextTypes = {
  router: React.PropTypes.object
};

export default AdAMap;
